<template>
  <el-dialog
    title="预览文章"
    :visible.sync="yulanVisible"
    width="50%"
  >
    <div class="title">{{ userlist.title }}</div>
    <div class="tuw">
      <span class="span1">{{ userlist.createTime }}</span>
      <span class="span1">{{ userlist.username }}</span>
      <span class="span1"><i class="el-icon-view" /></span>
      <span class="span1">{{ userlist.visits }}</span>
    </div>
    <div class="mainmsg" v-html="userlist.articleBody" />
  </el-dialog>

</template>

<script>
export default {

  props: ['list', 'indexget'],
  data() {
    return {
      userlist: {
        title: '',
        createTime: '',
        username: '',
        visits: '',
        articleBody: ''
      },
      yulanVisible: false
    }
  },
  watch: {
    indexget: {
      handler(newVal, oldVal) {
        this.userlist.title = this.list[this.indexget].title
        this.userlist.createTime = this.list[this.indexget].createTime
        this.userlist.username = this.list[this.indexget].username
        this.userlist.visits = this.list[this.indexget].visits
        this.userlist.articleBody = this.list[this.indexget].articleBody
      }
    }
  },
  methods: {

  }

}
</script>
<style>
.el-dialog{
    border-radius:8px !important;
}
.el-dialog__header{
    /* border-radius:8px !important; */
    background-color: #409eff;

}
.el-dialog__title{
    color: white;
    font-size: 15px;
}
.el-dialog__headerbtn,.el-dialog__close{
    color: white  !important;
}
.title{
    font-size: 25px;
    margin-bottom: 25px;
}
.tuw{
    font-size: 15px;
}
.span1{
    margin-right: 5px;
}
.mainmsg{
    background-color: #f5f5f5;
    margin-top: 10px;
    padding-top: 5px;
    padding-left: 5px;
}
</style>
